<div class="x-tabs" [ngClass]="classMap">
  <div #list class="x-tabs-list" *ngIf="!sliderHidden">
    <x-slider
      #slider
      [animated]="animated && type !== 'tag'"
      [justify]="justify"
      [nodeJustify]="nodeJustify"
      [data]="sliderOption.data"
      [layout]="sliderOption.layout"
      [size]="size"
      [nodeTpl]="nodeTpl"
      [activatedIndex]="sliderOption.activatedIndex"
      (indexChange)="activatedChange($event)"
    ></x-slider>
  </div>
  <div #content class="x-tabs-contents" [class.x-tabs-contents-animated]="animated && (layout === 'top' || layout === 'bottom')">
    <x-tab-content
      *ngFor="let tab of listTabs; index as i"
      [active]="activeIndex == i"
      [content]="tab.content"
      [class.x-tab-content-unactivated]="activeIndex != i"
      [style.transform]="'translate(' + (-activeIndex || 0) * 100 + '%, 0px)'"
    >
    </x-tab-content>
  </div>
</div>
